<template>
  <div>
    <a-card :title="title">
      <a-card-grid
        style="width: 40%;height: 80px; text-align: center"
        :hoverable="false">项目经理奖金</a-card-grid>
      <a-card-grid
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="edit"
            style="left: -10px; width: 80%; top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="rate1"
              placeholder="请输入固定比率(%)" />
          </div>
          <span v-show="!edit">{{ showRate(ext13 ? ext13 * 100 : undefined) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        style="width: 40%;height: 80px;text-align: center"
        :hoverable="false">以毛利额为基准</a-card-grid>

      <a-card-grid
        style="width: 40%;height: 80px; text-align: center"
        :hoverable="false">项目组毛利奖金</a-card-grid>
      <a-card-grid
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="edit"
            style="left: -10px; width: 80%; top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="rate2"
              placeholder="请输入固定比率(%)" />
          </div>
          <span v-show="!edit">{{ showRate(ext14? ext14 * 100 : undefined) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        style="width: 40%;height: 80px;text-align: center"
        :hoverable="false">以毛利额为基准</a-card-grid>

      <a-card-grid
        style="width: 40%;height: 80px; text-align: center"
        :hoverable="false">项目组固定提成</a-card-grid>
      <a-card-grid
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="edit"
            style="left: -10px; width: 80%; top: -23px;text-align: left;">
            <a-input-number
              v-model="rate3"
              :min="0"
              :max="100"
              :precision="2"
              placeholder="请输入固定比率(%)" />
          </div>
          <span v-show="!edit">{{ showRate(ext15 ? ext15 * 100 : undefined) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        style="width: 40%;height: 80px;text-align: center"
        :hoverable="false">以合同额为基准</a-card-grid>

    </a-card>
  </div>
</template>
<script>
import { showRate } from './config'

export default {
  name: 'EnginerRates',
  components: {},
  props: {
    title: {
      type: String,
      default: () => ''
    },
    ext13: {
      type: [Number, String],
      default: () => {}
    },
    ext14: {
      type: [Number, String],
      default: () => {}
    },
    ext15: {
      type: [Number, String],
      default: () => {}
    },
    edit: {
      type: Boolean,
      default: () => false
    }
  },
  watch: {
    edit: function (edit) {
      if (edit) {
        this.rate1 = (this.ext13 * 100).toFixed(6)
        this.rate2 = (this.ext14 * 100).toFixed(6)
        this.rate3 = (this.ext15 * 100).toFixed(6)
      }
    }
  },
  data () {
    this.showRate = showRate
    return {
      rate1: 0,
      rate2: 0,
      rate3: 0
    }
  },
  methods: {
    getValue () {
      /**
        项目经理奖金	6.00%	以毛利额为基准	L8-ext13
      项目组毛利奖金	1.00%	以毛利额为基准	L9-ext14
      项目组固定提成	0.30%	以合同额为基准	L10-ext15
       */
      return {
        ext13: (this.rate1 / 100).toFixed(6),
        ext14: (this.rate2 / 100).toFixed(6),
        ext15: (this.rate3 / 100).toFixed(6)
      }
    }
  }
}
</script>
